<template>
  <div class="edit-restaurant">
    <h2>设置食堂管理员</h2>
    <form @submit.prevent="submitForm">
      <label>名称:</label>
      <span>{{ restaurantData.name }}</span>

      <label>地址:</label>
      <span>{{ restaurantData.address }}</span>

      <label>电话:</label>
      <span>{{ restaurantData.phone }}</span>

      <label>营业时间:</label>
      <span>{{ restaurantData.openinghours }}</span>

      <label>餐厅评分:</label>
      <span>{{ restaurantData.rating }}</span>

      <label>餐厅类型:</label>
      <span>{{ restaurantData.type }}</span>

      <!-- 新增 食堂管理员下拉框 -->
      <label>选择食堂管理员：</label>
      <el-select v-model="restaurantData.adminId" placeholder="请选择食堂管理员" style="width: 100%;">
        <el-option
            v-for="admin in adminList"
            :key="admin.id"
            :label="admin.name"
            :value="admin.id">
        </el-option>
      </el-select>
      <button type="button" @click="goBack">返回</button>
      <button type="submit">设置</button>
    </form>
  </div>
</template>


<script>
export default {
  name: 'EditRestaurant',
  data() {
    return {
      restaurantId: null,
      restaurantData: {}, // 存储查询到的数据
      adminList: [] // 存储管理员列表
    };
  },
  async created() {
    this.restaurantId = this.$route.params.id;
    await this.fetchRestaurantData();
    await this.fetchAdminList(); // 加载管理员列表
  },
  methods: {
    // 加载 食堂管理员 按钮
    async fetchAdminList() {
      try {
        const url = `http://localhost:8090/user/selectAllUser`; // 假设这是获取管理员的接口
        const response = await fetch(url);
        const json = await response.json();

        if (json.total === 200) {
          this.adminList = json.data; // 假设返回的数据结构为 { total: 200, data: [...] }
        } else {
          alert('获取管理员失败');
        }
      } catch (error) {
        console.error('获取管理员出错:', error);
      }
    },
    // 根据id查询单条记录
    async fetchRestaurantData() {
      try {
        // 假设调用 API 查询数据，例如：

        const url = `http://localhost:8090/restaurants/selectOneRestaurants`;
        const params = new URLSearchParams({
          id: this.restaurantId
        });
        fetch(`${url}?${params.toString()}`)
            .then(response => response.json())
            .then(json => {
              console.log(json);
              this.restaurantData = json.data;
            });
      } catch (error) {
        console.error('获取餐厅数据失败:', error);
      }
    },
    // 设置 食堂管理员
    async submitForm() {
      // 校验是否选择了管理员
      if (!this.restaurantData.adminId) {
        this.$message.warning('请先选择一个食堂管理员');
        return;
      }
      try {
        const url = `http://localhost:8090/userrestaurants/updateUserrestaurants`;
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            restaurantsid: this.restaurantId,
            userid: this.restaurantData.adminId // 只提交需要的字段
          })
        });
        const result = await response.json();
        if (result.total === 200) {
          this.$message.success('管理员设置成功');
          this.$router.push('/'); // 返回首页
          this.$root.$emit('refresh-data'); // 刷新列表数据
        } else {
          this.$message.error('设置失败，请重试');
        }
      } catch (error) {
        console.error('请求出错:', error);
        this.$message.error('网络错误');
      }
    },
    // 返回上一页
    goBack() {
      this.$router.back(); // 返回上一页
    }
  }
};
</script>
<style scoped>
.edit-restaurant {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 10px;
  font-weight: bold;
}

input {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-top: 20px;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>


